<template>
    <div class="fill_all fill_all_re" :style="{ '--resizeY': resizeY }">
        <div class="head_title" :style="{ transform: resizeCss }">
            <div class="l">
                <div class="weather">
                    <img src="@/assets/images/qing.png" alt="">
                    <span>20~38℃</span>
                </div>
            </div>
            <div class="c">智能驾驶舱</div>
            <div class="r">
                <div class="timeDay">
                    <div class="date">{{ boardDate }}</div>
                    <div class="time">{{ boardTime }}</div>
                </div>
            </div>
        </div>
        <div class="fill_all" id="dashboard"></div>
        <div class="grid_l" :style="{ transform: resizeCss, top: 95 * resizeY + 'px' }">
            <div class="box1">
                <div class="box_head">
                    <img src="@/assets/images/dashboard/h_yu.png" alt="">
                    <span>育种分类统计</span>
                </div>
                <div class="fill_all_remind" ref="yuRef"></div>
            </div>
            <div class="box2">
                <div class="box_head">
                    <img src="@/assets/images/dashboard/h_lun.png" alt="">
                    <span>论文统计</span>
                </div>
                <div class="fill_all_remind" ref="lunRef"></div>
            </div>
            <div class="box3">
                <div class="box_head">
                    <img src="@/assets/images/dashboard/h_zn.png" alt="">
                    <span>专利统计</span>
                </div>
                <div class="fill_all_remind" ref="zhuanRef"></div>
            </div>
        </div>
        <div class="grid_r" :style="{ transform: resizeCss, top: 95 * resizeY + 'px' }">
            <div class="box2">
                <div class="box_head">
                    <img src="@/assets/images/dashboard/h_we.png" alt="">
                    <span>气象信息</span>
                </div>
                <div class="fill_all_remind fill_all_flex">
                    <div class="three_half">
                        <div class="image">
                            <img src="@/assets/images/weather/tempura1.png" alt="">
                        </div>
                        <p>温度</p>
                        <span>32℃</span>
                    </div>
                    <div class="three_half">
                        <div class="image">
                            <img src="@/assets/images/weather/fengsu1.png" alt="">
                        </div>
                        <p>风速</p>
                        <span>3m/s</span>
                    </div>
                    <div class="three_half">
                        <div class="image">
                            <img src="@/assets/images/weather/jiangyu1.png" alt="">
                        </div>
                        <p>降雨量</p>
                        <span>1mm</span>
                    </div>
                    <div class="three_half">
                        <div class="image">
                            <img src="@/assets/images/weather/shidu1.png" alt="">
                        </div>

                        <p>湿度</p>
                        <span>80Rh</span>
                    </div>
                    <div class="three_half">
                        <div class="image">
                            <img src="@/assets/images/weather/fengxiang1.png" alt="">
                        </div>
                        <p>风向</p>
                        <span>西南</span>
                    </div>
                </div>
            </div>
            <div class="box1">
                <div class="box_head">
                    <img src="@/assets/images/dashboard/h_tui.png" alt="">
                    <span>推广服务人次</span>
                </div>
                <div class="fill_all_remind" ref="renRef"></div>
            </div>
            <div class="box3">
                <div class="box_head">
                    <img src="@/assets/images/dashboard/h_bo.png" alt="">
                    <span>服务播报</span>
                </div>
                <div class="fill_all_remind">
                    <ScrollBoard style="height:100%" :config="scrollConfig"></ScrollBoard>
                </div>
            </div>
        </div>
        <!-- <div class="grid_b"></div> -->
        <div class="popup" id="popup">
            <div class="title" @click="toHidden">
                <el-icon>
                    X
                </el-icon>
            </div>
            <div class="popup_body">
                <el-select v-model="selectColor" placeholder="选择作物对应展示颜色" size="large" value-key="value"
                    style="width: 240px" @change="changeColor">
                    <el-option v-for="item in colorOptions" :key="item.value" :label="item.label" :value="item" />
                </el-select>
            </div>
        </div>
    </div>
    <el-drawer v-model="openDraw" :title="drawerTitle" direction="rtl" :before-close="handleClose" class="draw_board">
        <component :is="componentName" :deviceName="drawerTitle"></component>
    </el-drawer>
</template>
<script setup>
import { onMounted, onBeforeUnmount, shallowRef, computed, nextTick, reactive, ref } from 'vue'
import { ESObjectsManager, ESGeoDiv, ESGltfModel } from 'esobjs-xe2-plugin/dist-node/esobjs-xe2-plugin-main';
import { initSceneJson, initSceneWithType, initurl } from '@/scripts/initializationJson';
import { Message } from "earthsdk-ui"
import { ES3DTileset } from "esobjs-xe2-plugin/dist-node/esobjs-xe2-plugin-main";
import * as $echarts from 'echarts'
// import * as THREE from 'three'

import { ScrollBoard } from '@kjgl77/datav-vue3'
import dayjs from 'dayjs'
import ViDraw from '@/pages/driver/viDraw.vue'
import QiDraw from '@/pages/driver/qiDraw.vue'
import { optionJson } from '@/scripts/options'
import { debounce } from '@/libs/util.js'
import { point as turfPoint, featureCollection as turfFeatureCollection, center as turfCenter, polygon as turfPolygon, bbox as turfBbox, randomPoint as turfRandomPoint, booleanPointInPolygon } from '@turf/turf'

import Highcharts from 'highcharts/highstock'
import highcharts3d from 'highcharts/highcharts-3d'
highcharts3d(Highcharts)

const objm = new ESObjectsManager();
const eCharIns = {}
const HCharIns = {}
const yuRef = ref(null)
const lunRef = ref(null)
const zhuanRef = ref(null)
const renRef = ref(null)
const boardDate = ref('')
const boardTime = ref('')
const openDraw = ref(false)
const drawerTitle = ref('设备')
const componentName = shallowRef(ViDraw)
const colorOptions = reactive([
    {
        label: '大麦',
        value: 'damai',
        color: [0.39, 0.37, 0.69, 1],
        modelUrl: '/treeGlb/Wheat.glb'
    },
    {
        label: '猴头菇',
        value: 'houtg',
        color: [0.58, 0.72, 0.44, 1],
        modelUrl: '/treeGlb/Mogu.glb'
    },
    // {
    //     label: '黄瓜',
    //     value: 'huanggua',
    //     color: [0.83, 0.75, 0.37, 1],
    //     modelUrl: '/treeGlb/Flower2.glb'
    // },
    // {
    //     label: '荠菜',
    //     value: 'jicai',
    //     color: [0.25, 0.41, 0.34, 1],
    //     modelUrl: '/treeGlb/Flower.glb'
    // },
    // {
    //     label: '水稻',
    //     value: 'shuidao',
    //     color: [0.57, 0.68, 0.82, 1],
    //     modelUrl: '/treeGlb/Bush.glb'
    // },
    // {
    //     label: '水稻不育系',
    //     value: 'shuidaob',
    //     color: [0.37, 0.54, 0.4, 1],
    //     modelUrl: '/treeGlb/BigTree.glb'
    // },
    // {
    //     label: '甜瓜',
    //     value: 'tiangua',
    //     color: [0.76, 0.51, 0.3, 1],
    //     modelUrl: '/treeGlb/BigTree2.glb'
    // },
])
let resizeCss = reactive('')
// const resizeX = ref(1)
const resizeY = ref(1)
const selectColor = ref('大麦')

const scrollConfig = reactive({
    header: ['科技服务'],
    headerBGC: '#1e596f82',
    oddRowBGC: '#003b51b3',
    evenRowBGC: '#0a2732b3',
    align: 'left',
    columnWidth: [50, 450],
    data: [
        [' 2020年度院领导班子和个人考核顺利完成'],
        ['经作所赴桐乡开展“三服务”活动'],
        ['我院赴中国水稻研究所考察调研'],
        ['浙粮集团和浙江善农现代农业科技发展有限公司来院交流'],
        ['农科院开展新春“三服务”工作'],
        ['科技人员赴桐乡开展三服务活动'],
        ['院领导赴梅花洲开展“三服务”活动'],
        ['生态所下乡开展“三服务”活动'],
        ['院经济作物所科技人员赴桐乡查看油菜生长情况'],
        [' 院领导赴秀洲区油车港镇开展“三服务”活动'],
        [' 院班子赴桐乡市大麻镇开展“三服务”工作'],
        [' 我院选育的嘉优中科3号制种产量突破200公斤']
    ],
    index: true
})
const yuRefOption = {
    // title: {
    //     text: '育种分类统计数',
    //     left: 'center',
    //     textStyle: {
    //         color: '#fff',
    //         fontSize: 14
    //     }
    // },
    color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4'],
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'right',
        textStyle: {
            color: '#fff',
        }
    },
    series: [
        {
            name: '农作物',
            type: 'pie',
            radius: '50%',
            label: {
                color: '#fff',
            },
            data: [
                { value: 1848, name: '大麦' },
                { value: 735, name: '猴头菇' },
                { value: 580, name: '黄瓜' },
                { value: 484, name: '芥菜' },
                { value: 700, name: '水稻' },
                { value: 100, name: '水稻不育系' },
                { value: 470, name: '甜瓜' },
                { value: 80, name: '小麦' }
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
}
const lunRefOption = {
    // title: {
    //     text: '统计',
    //     left: 'center',
    //     textStyle: {
    //         color: '#fff',
    //         fontSize: 14
    //     }
    // },
    tooltip: {
        trigger: 'axis',
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '20px',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['2018', '2019', '2020', '2021', '2022', '2023', '2024'],
        axisLabel: {
            color: '#fff'
        }
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            color: '#fff'
        },
        splitLine: {
            lineStyle: {
                type: "dashed",
                color: "rgba(135,140,147,0.8)",
            },
        }
    },
    series: [
        {
            name: '论文统计',
            data: [82, 32, 91, 34, 129, 133, 80],
            type: 'line',
            itemStyle: {
                color: '#33d0ff'
            },
            areaStyle: {
                color: new $echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                        { offset: 0, color: "rgba(61,234,255, 0.9)" },
                        { offset: 0.7, color: "rgba(61,234,255, 0.3)" },
                    ],
                    false
                ),

                shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
                shadowBlur: 20
            }
        }
    ]
};
const zhuanRefOption = {
    // title: {
    //     text: '专利统计',
    //     left: 'center',
    //     textStyle: {
    //         color: '#fff',
    //         fontSize: 14
    //     }
    // },
    tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        top: 'bottom',
        textStyle: {
            color: '#fff',
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '30px',
        top: '20px',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: ['2018', '2019', '2020', '2021', '2022', '2023', '2024'],
            axisLabel: {
                color: '#fff'
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            axisLabel: {
                color: '#fff'
            },
            splitLine: {
                lineStyle: {
                    type: "dashed",
                    color: "rgba(135,140,147,0.8)",
                },
            }
        }
    ],
    series: [{
        name: '专利统计',
        type: 'bar',
        stack: 'Ad',
        data: [8, 18, 6, 11, 14, 19, 21],
        barMaxWidth: '50%',
        itemStyle: {
            color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                    {
                        offset: 0,
                        color: "rgba(15, 132, 255, 1)", // 0% 处的颜色
                    },
                    {
                        offset: 1,
                        color: "rgba(15, 138, 250, 0.4)", // 100% 处的颜色
                    },
                ],
                global: false
            }
        }
    },
    {
        name: '许可数量',
        type: 'bar',
        stack: 'Ad',
        data: [5, 10, 3, 5, 6, 8, 9],
        barMaxWidth: '50%',
        itemStyle: {
            color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                    {
                        offset: 0,
                        color: "rgba(225, 95, 35, 1)", // 0% 处的颜色
                    },
                    {
                        offset: 1,
                        color: "rgba(220, 90, 40, 0)", // 100% 处的颜色
                    },
                ],
                global: false
            }
        }
    }]
}
const renRefOption = {
    // title: {
    //     text: '推广服务人次',
    //     left: 'center',
    //     textStyle: {
    //         color: '#fff',
    //         fontSize: 14
    //     }
    // },
    tooltip: {
        trigger: 'axis'
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '20px',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['2018', '2019', '2020', '2021', '2022', '2023', '2024'],
        axisLabel: {
            color: '#fff'
        }

    },
    yAxis: {
        type: 'value',
        axisLabel: {
            color: '#fff'
        },
        splitLine: {
            lineStyle: {
                type: "dashed",
                color: "rgba(135,140,147,0.8)",
            },
        },
    },
    series: [
        {
            name: '推广服务人次',
            data: [820, 320, 901, 304, 1029, 1033, 800],
            type: 'line',
            itemStyle: {
                color: '#00fff8'
            }
        }
    ]
};

const pie3dOption = function (data, pieName) {
    return {
        chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45
            },
            margin: [0, 0, 0, 0],
            backgroundColor: 'transparent'
        },
        // 版权
        credits: {
            enabled: false
        },
        title: {
            enabled: false,
            text: '',
            align: 'center',
            verticalAlign: 'middle',
            style: {
                color: '#fff',
                fontSize: '16px'
            }
        },
        // 数据列配置
        plotOptions: {
            pie: {
                size: '100%',
                innerSize: '60%',
                depth: 50,
                dataLabels: { // 数据标签
                    enabled: true,
                    color: '#fff',
                    style: {
                        fontSize: '12px',
                        fontFamily: 'Arial, Helvetica, sans-serif'
                    },
                    borderWidth: 0
                },
            }
        },
        labels: {
            style: {
                display: 'none',
                color: '#ff0000',
                fontSize: '14px'
            }
        },
        tooltip: {
            style: {
                fontSize: '14px',
                color: '#666',
                fontFamily: 'Arial, Helvetica, sans-serif'
            },
            headerFormat: '{series.name}</br>{point.key}',
            pointFormat: ':{point.y}'
        },
        series: [{
            name: pieName,
            data
        }]
    }
}
const timer = setInterval(() => {
    boardDate.value = dayjs().format('YYYY-MM-DD')
    boardTime.value = dayjs().format('HH:mm:ss')
}, 1000)
// 初始化地球
function initBoard() {
    // 创建Cesium视口
    const viewer = objm.createCesiumViewer({
        "domid": document.getElementById("dashboard")
    })
    // 监听视口状态
    viewer.statusChanged.don(status => {
        if (status == 'Created') {
            // 视口创建完成，飞到初始视角位置
            // console.log(viewer, 'viewer', ESObjectsManager, objm);
        }
    })
    objm.jsonLoadingEvent.don((e) => {
        if (e.type === 'loaded') {
            listenSceneEvent()
            // 查找vr工厂对象，切换到这个视角
            const sceneObject = objm.getSceneObjectById('d36f6fd5-119c-4c39-a3d8-6690fecede41')
            if (!(sceneObject instanceof ES3DTileset)) return
            setTimeout(() => {
                sceneObject.flyTo()
            }, 1000);
            // 准备three相关
            // initThree()
            cesiumObj.viewer = objm.activeViewer.innerViewer.viewer
            loadModel('/treeGlb/Wheat.glb')
        }
    })
    initSceneFetch(objm)
}
// 监听事件

let polygonObj = null
function listenSceneEvent() {
    // sceneTree
    const objSheIdArr = ['30ad2bf5-1796-496a-9c8e-6cce9d5188f4', 'df2e3b8a-f075-4427-81a5-5e4c9966e43b']
    objSheIdArr.forEach(itemId => {
        const sceneObj = objm.getSceneObjectById(itemId)
        bindEvent(sceneObj, 'she')
    })
    const objQiIdArr = ['98730a86-aa65-49b7-89e2-aef0aa308628', 'e0f4f354-89fb-487e-a262-9ecd8ee3007b']
    objQiIdArr.forEach(itemId => {
        const sceneObj = objm.getSceneObjectById(itemId)
        bindEvent(sceneObj, 'qi')
    })

    polygonObj = objm.getSceneObjectById('87030560-58b2-41ec-8f75-3be5563239f6')
    polygonObj.filled = true
    const arr = polygonObj.json.points
    const polygonPoint = arr.map(item => {
        return item.slice(0, 2)
    })
    // [turfPoint(arr[0].slice(0, 2)), turfPoint(arr[1].slice(0, 2)), turfPoint(arr[2].slice(0, 2)), turfPoint(arr[3].slice(0, 2))]
    // const polygonPoint = [arr[0].slice(0, 2), arr[1].slice(0, 2), arr[2].slice(0, 2), arr[3].slice(0, 2), arr[0].slice(0, 2)]
    const polygonFourFeaturePoint = polygonPoint.map(item => turfPoint(item))
    const features = turfFeatureCollection(polygonFourFeaturePoint)
    const centerPoint = turfCenter(features)
    const point3d = [...centerPoint.geometry.coordinates, 0]
    // // 这是给three的坐标找个中心点的最大最小坐标系
    const polygonTruf = turfPolygon([
        polygonPoint.concat(polygonPoint.slice(0, 1))
    ])
    // 使用 turf.bbox 获取边界框
    const bbox = turfBbox(polygonTruf);
    // console.log(bbox, 'bbox', arr);
    // const minWGS84 = [bbox[0], bbox[1]]; // 左下角
    // const maxWGS84 = [bbox[2], bbox[3]]; // 右上角
    // var points = turfRandomPoint(20, { bbox })
    // console.log(points, 'points');
    // ce = window.Cesium.Cartesian3.fromDegrees(
    //     (minWGS84[0] + maxWGS84[0]) / 2,
    //     ((minWGS84[1] + maxWGS84[1]) / 2) - 1,
    //     200000
    // )
    // console.log(ce, 'v 546');
    modelArr = randomLatLon(bbox[1], bbox[3], bbox[0], bbox[2], polygonTruf, 8)

    divSceneObject = objm.createSceneObject(ESGeoDiv)
    divSceneObject.show = false
    divSceneObject.position = point3d
    const divContent = document.getElementById('popup')
    divContent.display = 'block'
    divSceneObject.instanceClass = class MyDiv {
        constructor(container, eSGeoDiv, viewer) {
            this._container = container;
            this._div = document.createElement('div');
            this._div.style.width = '250px'
            this._div.style.height = '100px'
            this._div.style.backgroundColor = 'rgba(0,0,0,0)'
            this._div.appendChild(divContent)
            this._container.appendChild(this._div)
        }
        destroy() {
            this._container.removeChild(this._div);
        }
    }
    polygonObj.pickedEvent.don(e => {
        if (e.sceneObject?.extras?.customerType === 'polygon1') {
            polygonPick(e.sceneObject)
        }
    })
}
function bindEvent(sceneObject, componentType) {
    if (sceneObject) {
        sceneObject.widgetEvent.don((e) => {
            if (e.type === 'leftClick') {
                const customerInfo = sceneObject.extras
                openDraw.value = true
                drawerTitle.value = customerInfo.customerType
                componentName.value = componentType === 'she' ? ViDraw : QiDraw
            }
        })
    }
}
let divSceneObject = null
const polygonPick = debounce(function () {
    if (divSceneObject) divSceneObject.show = true
}, 400)
function destroy() {
    if (divSceneObject) objm.destroySceneObject(divSceneObject)
    // console.log("销毁成功")
}
function toHidden() {
    if (divSceneObject) divSceneObject.show = false
}
function changeColor(valueItem) {
    if (polygonObj) {
        polygonObj.fillColor = valueItem.color
        loadModel(valueItem.modelUrl)
    }
}
// 
const initJsin = (url) => {
    return optionJson
}
const cesiumObj = {
    viewer: null
}

/* 模型加载 start */
let modelArr = []
let modelCollection = []
function randomLatLon(minLat, maxLat, minLon, maxLon, polygonTruf, loopCount) {
    const latDiff = maxLat - minLat
    const lonDiff = maxLon - minLon
    const points = []
    console.log(minLat, maxLat, minLon, maxLon, 'console');

    for (let x = 1; x < loopCount; x++) {
        for (let y = 1; y < loopCount; y++) {
            const lat = minLat + latDiff / loopCount * x
            const lon = minLon + lonDiff / loopCount * y
            if (booleanPointInPolygon(turfPoint([lon, lat]), polygonTruf)) {
                points.push({ lat, lon })
            }
        }
    }
    return points
    // const lat = (maxLat - minLat) * Math.random() + minLat;
    // const lon = (maxLon - minLon) * Math.random() + minLon;

}
function loadModel(modelUrl) {
    modelCollectionDestroy()
    //     // 原生加入的话 一定得单视口
    modelArr.forEach((item, index) => {
        const position = window.Cesium.Cartesian3.fromDegrees(item.lon, item.lat, 1)
        const entity = cesiumObj.viewer.entities.add({
            name: '模型',
            position,
            id: 'cus_id_' + + modelUrl + '_' + index,
            model: {
                uri: modelUrl,
                scale: 1,
                // color: window.Cesium.Color.GREEN,
                silhouetteColor: window.Cesium.Color.WHITE
            }
        })
        modelCollection.push(entity)
    })
}
function modelCollectionDestroy() {
    modelCollection.forEach(entity => {
        cesiumObj.viewer.entities.remove(entity)
    })
    modelCollection = []
}
/* 模型加载 end */
function initSceneFetch(xbsjEarthUi) {
    new Promise(resolve => {
        setTimeout(function () {
            resolve({ url: 'https://t2.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=6431667e2e6bf7693c902a386b3a8a4c' })
        }, 1000)
    }).then((res) => {
        const json = initJsin(res.url)
        xbsjEarthUi.json = json
        Message.success('加载默认场景成功')
    })

}
function initEchart(refType) {
    const refMap = {
        // yuRef,
        lunRef,
        zhuanRef,
        renRef
    }
    const optionMap = {
        // yuRef: yuRefOption,
        lunRef: lunRefOption,
        zhuanRef: zhuanRefOption,
        renRef: renRefOption,
    }
    if (!refType) return
    const refDOm = $echarts.getInstanceByDom(refMap[refType].value)
    if (!refDOm) {
        eCharIns[refType] = $echarts.init(refMap[refType].value, null, { renderer: 'svg' })
    }
    eCharIns[refType].clear()
    eCharIns[refType].setOption(optionMap[refType], true)
}
function initHEchart() {
    const data = [
        ['大麦', 1848],
        ['猴头菇', 735],
        ['黄瓜', 580],
        ['芥菜', 484],
        ['水稻', 700],
        ['水稻不育系', 100],
        ['甜瓜', 470],
        ['小麦', 180],
    ]
    const option = pie3dOption( data, '育种分类')
    HCharIns.pie2 = Highcharts.chart(yuRef.value, option)
}
function handleClose(done) {
    openDraw.value = false
    done()
}

// 缩放 适配
const resizeFn = debounce(function () {
    let winW =
        document.documentElement.clientWidth ||
        document.body.clientWidth
    let winH =
        document.documentElement.clientHeight ||
        document.body.clientHeight
    const ratioX = winW / 1920
    const ratioY = winH / 1080
    resizeY.value = ratioY
    resizeCss = 'scale(' + ratioX + ', ' + ratioY + ')'
}, 200)
onMounted(() => {
    nextTick(() => {
        resizeFn()
        window.addEventListener('resize', resizeFn)
        initBoard()
        initHEchart()
        const refMap = ['lunRef', 'zhuanRef', 'renRef']
        refMap.forEach(refString => {
            initEchart(refString)
        })
    })
})
onBeforeUnmount(() => {
    clearInterval(timer)
    modelCollectionDestroy()
    destroy()
})
const getTitle = computed(() => {
    return componentName.value === QiDraw ? '气象' : '监控'
})
</script>
<style lang="scss" scoped>
$bgcolor: #01324aed;

.fill_all {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.fill_all_re {
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
}

.head_title {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 90px;
    z-index: 1;
    background: #001f2e99 url('@/assets/images/head_bj2.png') center center no-repeat;
    background-size: 100% 100%;
    transform-origin: left top;

    .l,
    .r {
        width: 30%;
    }

    .l {
        position: relative;
    }

    .c {
        flex: 1;
        line-height: 90px;
        text-align: center;
        font-size: 30px;
        font-weight: 700;
        letter-spacing: 5px;
        // text-shadow: 1px 2px 2px rgb(194, 194, 194);
    }

    .weather {
        display: flex;
        gap: 10px;
        justify-content: center;
        align-items: center;
        position: absolute;
        bottom: 9px;
        left: 90px;

        span {
            font-family: fantasy;
            font-size: 20px;
        }
    }

    .timeDay {
        @extend .weather;
        left: unset;
        right: 100px;
        gap: 4px;
        flex-direction: column;

        .date {
            font-size: 14px;
            color: #ccc;
        }

        .time {
            font-family: serif;
            font-size: 20px;
            font-weight: 600;
            font-style: italic;
            letter-spacing: 3px;
        }
    }
}

.grid_l {
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: absolute;
    top: 95px;
    left: 0;
    width: 500px;
    height: 980px;
    z-index: 1;
    transform-origin: left top;
}

.grid_r {
    @extend .grid_l;
    left: unset;
    right: 0;
    transform-origin: right top;
}

.grid_b {
    position: absolute;
    bottom: 3px;
    left: 510px;
    width: calc(100% - 1020px);
    height: 200px;
    background-color: $bgcolor;
    border-radius: 5px;
}

.box1,
.box2,
.box3 {
    width: 100%;
    height: 33%;
    // background-color: $bgcolor;
    box-sizing: border-box;
    padding: 2px;
    border-radius: 5px;
    background: #001d2c99 url('@/assets/images/box_bord17.png') center center no-repeat;
    background-size: 100% 100%;

    .box_head {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        height: 49px;
        padding-top: 6px;
        // line-height: 49px;
        font-weight: 700;
        // background-color: #00628850;
        background: linear-gradient(136deg, #00000000 21px, rgb(3 79 109 / 20%) 0) right, linear-gradient(224deg, #00000000 21px, rgba(0, 98, 136, 0.2) 0) left;
        border-bottom: 2px solid #00f5dfab;
        // background: #00577a61 url('@/assets/images/head_bgc5.png') center center no-repeat;
        // background-size: 60% 100%;
        box-sizing: border-box;

        img {
            width: 30px;
            object-fit: contain;
            margin-left: -2em;
        }

        span {
            font-size: 20px;
            color: #fff;
        }
    }

    .fill_all_remind {
        height: calc(100% - 50px);
        overflow: hidden;
    }

    .fill_all_flex {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5%;
    }

    .three_half {
        width: 33%;
        height: 49.5%;
        display: grid;
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
        background-color: #00394740;
        border-radius: 10px;
        box-shadow: 2px 2px 2px #00546882;

        .image {
            display: flex;
            grid-row: 1 / 3;
            grid-column: 1 / 2;
        }

        img {
            width: 80%;
            object-fit: contain;
            margin: 10% auto 0;
        }

        p {
            margin: 0;
            display: flex;
            align-items: end;
        }

        span {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 20px;
            color: aquamarine;
        }
    }
}

.box2 {
    // 
}

.box3 {
    //    
}

.popup {
    position: relative;
    // display: none;
    height: 95px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid #fff;
    background-color: #1d5f72;

    .title {
        text-align: right;
        color: #fff;
        border-bottom: 1px solid #fff;
        padding: 3px 5px;

        &:hover {
            cursor: pointer;
        }
    }

    .popup_body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 65px;
    }
}

#popup::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: rgb(233, 233, 233);
    z-index: 1;
}
</style>
<style lang="scss">
* {
    padding: 0;
    margin: 0;
}

$bgDrawColor: #01324a;

.draw_board {
    background-color: $bgDrawColor;

    .el-drawer__header {
        background-color: $bgDrawColor;
    }

    .el-drawer__body {
        background-color: $bgDrawColor;
    }

    .el-icon,
    .el-drawer__header {
        color: #fff;
    }
}
</style>